<template>
  <el-container style="padding: 15px">
    <el-header>
      <el-form size="small" label-width="70px">
        <el-row type="flex" :gutter="20" align="middle">
          <el-col :span="4">
            <el-form-item label="账户名">
              <el-input v-model="userSearchForm.account" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="昵称">
              <el-input v-model="userSearchForm.nickName" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="状态">
              <el-select v-model="userSearchForm.enabled" placeholder="请选择状态">
                <el-option :value="1" label="可用" />
                <el-option :value="2" label="禁用" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label-width="0">
              <el-button type="primary">搜索</el-button>
              <el-button>重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-header>
    <el-main>
      <el-form size="small">
        <el-row type="flex" :gutter="20" align="middle">
          <el-col :span="4">
            <el-form-item>
              <el-button type="success" @click="addUserHandler">添加</el-button>
              <el-button type="warning">删除</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table :data="userList" @selection-change="userTableHandleSelectionChange">
        <el-table-column label="账户名" prop="account" />
        <el-table-column label="昵称" prop="nickName" />
        <el-table-column label="部门" prop="departmentName" />
        <el-table-column label="职务" prop="stationName" />
        <el-table-column label="状态" prop="enabled">
          <template v-slot="scope">
            <el-tag v-if="scope.row.enabled === 1" type="success" size="small">可用</el-tag>
            <el-tag v-else type="warning" size="small">禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="createTime" :formatter="tableTimeFormat" />
        <el-table-column label="操作">
          <template v-slot="scope">
            <el-button type="text" size="small" @click="updateUserHandler(scope.row.id)">编辑</el-button>
            <el-button type="text" size="small" @click="deleteUserById(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[10, 20, 40, 80, 100]"
        :page-size="sizePage"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalPage"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-main>
    <el-dialog :title="userDialogFormTitle" :visible.sync="userDialogFormVisible" width="30%" destroy-on-close>
      <el-form size="small" label-width="50px" :model="userObj" :rules="userFormRule">
        <el-divider>用户基本信息</el-divider>
        <el-row type="flex" :gutter="20" align="middle">
          <el-col :span="12">
            <el-form-item label="账户">
              <el-input v-model="userObj.account" :disabled="isUpdate" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="昵称">
              <el-input v-model="userObj.nickName" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" :gutter="20" align="middle">
          <el-col :span="12">
            <el-form-item label="部门">
              <el-select v-model="userObj.departmentId" placeholder="请选择" style="width: 100%">
                <el-option v-for="item in departmentList" :key="item.id" :value="item.id" :label="item.departmentName" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="职务">
              <el-select v-model="userObj.stationId" placeholder="请选择" style="width: 100%">
                <el-option v-for="item in stationList" :key="item.id" :value="item.id" :label="item.stationName" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" :gutter="20" align="middle">
          <el-col :span="12">
            <el-form-item label="状态">
              <el-select v-model="userObj.enabled">
                <el-option :value="1" label="可用" />
                <el-option :value="2" label="禁用" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="权重">
              <el-input v-model="userObj.orders" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider>用户权限信息</el-divider>
        <el-row type="flex" :gutter="20" align="middle">
          <el-col :span="12">
            <el-form-item label="角色">
              <el-select v-model="userObj.roles" placeholder="请选择" multiple collapse-tags style="width: 100%">
                <el-option v-for="item in roleList" :key="item.id" :value="item.id" :label="item.roleName" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" align="middle">
          <el-col :offset="7">
            <el-form-item label-width="0">
              <el-button type="success" @click="saveOrUpdate">确定</el-button>
              <el-button @click="userDialogFormCloseHandler">取消</el-button>
              <el-button type="info">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </el-container>
</template>

<script>
import { userPage, userSearchForm, userById, updateUser, deleteUserById, addUser } from '@/api/user'
import { validObj } from '@/utils/validate'
import { parseTime } from '@/utils'
import { getRoleListNoPage } from '@/api/role'
import { getDepartmentNoPage } from '@/api/department'
import { getStationNoPage } from '@/api/station'

export default {
  name: 'Index',
  data() {
    return {
      userSearchForm: {},
      userObj: {},
      userFormRule: {
        account: [
          { required: true, trigger: 'blur', message: '该选项为必填项' }
        ]
      },

      userList: [],
      currentPage: 1,
      sizePage: 10,
      totalPage: 0,
      roleList: [],
      departmentList: [],
      stationList: [],

      isUpdate: false,
      userDialogFormTitle: '',
      userDialogFormVisible: false,
      userDialogFormButtonLoading: false
    }
  },

  created() {
    this.init()
  },

  methods: {

    init() {
      this.getPage()
      this.getRoleList()
      this.getStationList()
      this.getDepartmentList()
    },

    handleSizeChange(val) {
      this.sizePage = val
      this.getPage()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getPage()
    },

    getPage() {
      const searchForm = this.userSearchForm
      const currentPage = this.currentPage
      const sizePage = this.sizePage
      if (validObj(searchForm)) {
        // 查询
        userSearchForm(searchForm, currentPage, sizePage).then(res => {
          this.userList = res.data.list
          this.totalPage = res.data.total
        })
      } else {
        // 一般分页
        userPage(currentPage, sizePage).then(res => {
          console.log(res)
          this.userList = res.data.list
          this.totalPage = res.data.total
        })
      }
    },

    tableTimeFormat(row, column, cellValue, index) {
      return parseTime(cellValue, '')
    },

    userDialogFormCloseHandler() {
      this.userDialogFormVisible = false
      this.userDialogFormTitle = ''
      this.userDialogFormButtonLoading = false
    },

    addUserHandler() {
      this.userObj = {}
      this.userDialogFormTitle = '添加用户'
      this.userDialogFormVisible = true
      this.isUpdate = false
    },

    updateUserHandler(id) {
      userById(id).then(res => {
        console.log(res)
        this.userObj = res.data.user
        this.userDialogFormTitle = '修改用户'
        this.userDialogFormVisible = true
        this.isUpdate = true
      })
    },

    saveOrUpdate() {
      const userObj = this.userObj
      if (userObj.id) {
        // 如果存在id，则是修改
        updateUser(userObj).then(res => {
          this.$message.success(res.message)
          this.updateUserHandler(userObj.id)
        })
      } else {
        this.save(userObj)
      }
    },

    save(user) {
      addUser(user).then(res => {
        this.$message.success(res.message)
        this.getPage()
        this.userDialogFormVisible = false
      })
    },

    userTableHandleSelectionChange(val) {
      console.log(val)
    },

    getRoleList() {
      getRoleListNoPage().then(res => {
        this.roleList = res.data.list
      })
    },

    getDepartmentList() {
      getDepartmentNoPage().then(res => {
        this.departmentList = res.data.list
      })
    },

    getStationList() {
      getStationNoPage().then(res => {
        this.stationList = res.data.list
      })
    },

    deleteUserById(id) {
      this.$confirm('此操作将删除用户，确定继续吗？', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        deleteUserById(id).then(res => {
          this.$message.success(res.message)
          this.getPage()
        })
      })
    }
  }
}
</script>

<style scoped>

</style>
